<template>
  <el-tabs type="card" v-model="activeName" @tab-click="">
    <el-tab-pane label="测试统计" name="first">

      <!--主体-->
      <div class="main">
        <!--顶栏-->
        <div class="topBlock">
          <el-button @click="" size="medium" icon="el-icon-delete-solid"></el-button>
        </div>

        <!--表格-->
        <div >
          <el-table
              :header-cell-style="{'border': 'none',textAlign:'center'}"
              :cell-style="{'border': 'true',textAlign:'center',}"
              :data="examListData"
              border


          >
            <el-table-column type="index" label="序号"/>
            <el-table-column prop="examName" label="测试名"></el-table-column>
            <el-table-column prop="paper.paperTitle" label="试卷名" />
            <el-table-column prop="handleClass.studentList" label="考生人数">
              <template slot-scope="scope">
                <a style="color:#409EFF;cursor:pointer" @click="viewStu(scope.row)">
                {{scope.row.handleClass.studentList.length }}
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="correctAnswerPaper.submitTime" label="批改时间" :formatter="formatSubmitTime" />
            <el-table-column prop="handleClass.school.schoolName" label="学校名称"></el-table-column>
            <el-table-column prop="handleClass.majorName" label="专业名称"></el-table-column>
            <el-table-column prop="handleClass.year" label="年级"></el-table-column>
            <el-table-column prop="id" label="操作" width="250" >
              <template slot-scope="scope">
                <!--                <el-button-group>-->
<!--                <el-button type="primary"  size="mini" icon="el-icon-data-line">-->
<!--                  成绩统计-->
<!--                </el-button>-->
                <!--                <el-button-group>-->
                <el-button type="primary"  size="mini" icon="el-icon-printer" @click="uploadCSVFile(scope.row)">
                  导出表格
                </el-button>

              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>

      <!--    查看考生列表隐藏框逻辑量-->
      <el-dialog
          title="考生列表"
          :visible.sync="viewStuVisible"
          width="30%"
      >
        <el-table :data="viewStuData">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="userName" label="姓名"></el-table-column>

        </el-table>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewStuVisible = false">确 定</el-button>
      </span>
      </el-dialog>

    </el-tab-pane>

  </el-tabs>



</template>

<script>
import {getExamListForStatisticsApi} from "@/api/Exam";
import {Storage} from '@/utils/localStorage'

const storage = new Storage();
import {uploadCSVFileApi} from "@/api/CorrectAnswerPaper";
export default {
  name: "ExamStatisticsView",
  data() {
    return {
      activeName: 'first',
      examListData:[],

      //查看考生列表的隐藏框逻辑量
      viewStuVisible: false,
      //查看学生列表的数据变量
      viewStuData: []
    };
  },
  methods:{
    uploadCSVFile(row){
      //使用axios请求无法弹出下载框 必须在浏览器地址发请求 http://localhost:8081/tea/upLoadCSVFile?id=46
      // window.open('http://localhost:8081/tea/upLoadCSVFile?id='+row.id)  弹出再关闭新标签
      window.location.href = 'http://localhost:8081/tea/upLoadCSVFile?id='+row.id;
      // uploadCSVFileApi({id:row.id})
      console.info(row.id)
    },
    formatSubmitTime(row){
      // 获取原始时间戳
      const timestamp = new Date(row.correctAnswerPaper.submitTime);
      // 获取当前时间的年份
      const currentYear = new Date().getFullYear();
      // 获取时间字符串中的年份
      const year = timestamp.getFullYear();
      // 如果当前时间的年份与时间字符串中的年份相同，只显示月日时分，否则显示年月日时分
      if (year === currentYear) {
        return `${(timestamp.getMonth() + 1).toString().padStart(2, '0')}-${timestamp.getDate().toString().padStart(2, '0')} ${timestamp.getHours().toString().padStart(2, '0')}:${timestamp.getMinutes().toString().padStart(2, '0')}`
      } else {
        return row.correctAnswerPaper.submitTime;
      }
    },
    viewStu(row) {
      this.viewStuData = row.handleClass.studentList
      this.viewStuVisible = true
      // 这里可以根据具体需求判断点击的元素
      // 例如，可以使用事件委托来判断点击的是哪一列
      // 然后执行相应的操作
      console.log('点击了表格中的一列');
      console.log(row);

    },
    getExamListForStatistics(){
      const user = storage.getItem("user");
      getExamListForStatisticsApi({id:user.id}).then(res=>{
        if (res.data.code == 200){
          this.examListData = res.data.data;
          console.info(this.examListData)
        }
      })
    }
  },
  created() {
    this.getExamListForStatistics()
  }
}
</script>

<style scoped>

.main {
  height: 750px;
}

.topBlock {
  display: flex;
  /*background-color: #42b983;*/
  height: 46px;
  align-items: center;
  justify-content: start;
  /*border-left: 1px solid #e6e6e6;*/
  /*border-right: 1px solid #e6e6e6;*/
  /*background-color: #f5f5f5;*/
  border-radius: 5px;
}


</style>